<template>
  <div class="ContactPortraitSearchResult">
    <div class="source-box">
      <span>{{baseInfoData.customer_group}}</span>
    </div>
    <div class="container">
      <el-card>
        <div class="header-box">
          <div class="photo">
            <div class="picture">
              <img src="../../../../static/img/weizhilianxiren.png">
            </div>
            <span>{{baseInfoData.territory}}</span>
          </div>
          <div class="message-box">
            <el-row type="flex" class="message-up">
              <el-col :span="3" :offset="1">
                <span>{{baseInfoData.name}}</span>
              </el-col>
              <el-col :span="4" :offset="1">
                <span>公司:{{baseInfoData.customername}}</span>
              </el-col>
              <el-col :span="4" :offset="1">
                <span>BU类型:{{baseInfoData.bu_type}}</span>
              </el-col>
              <el-col :span="3" :offset="1">
                <span>职位:{{baseInfoData.work_position}}</span>
              </el-col>
              <el-col :span="5" :offset="1">
                <span>Lenovo ID:{{baseInfoData.lenovoid}}</span>
              </el-col>
            </el-row>
            <el-row type="flex" class="message-down">
              <el-col :span="3" :offset="1">
                <span>电话:{{baseInfoData.telephone}}</span>
              </el-col>
              <el-col :span="4" :offset="1">
                <span>邮箱:{{baseInfoData.email}}</span>
              </el-col>
              <el-col :span="4" :offset="1">
                <span>微信昵称:{{baseInfoData.nick_name}}</span>
              </el-col>
              <el-col :span="4" :offset="1">
                <span>语言:{{baseInfoData.language}}</span>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="label-box" v-if="labelData.length !== 0">
          <div class="type-title">{{$t('ContactPortrait.labelTitle')}}:</div>
          <div class="type-detial">
            <span class="type-item" v-for="(item, index) in labelData.slice(0, 13)" :key="Math.random()"
                  :class="{'type-selected': item.flag === true}">{{item.label}}：{{item.value}}</span>
            <a href="javascript:;" class="text-btn"
               @click="toggleText">{{showMoreLabel ? $t('bidding.collapse') : $t('bidding.more')}}</a>
          </div>
          <div class="type-detial" v-show="showMoreLabel">
            <span class="type-item" v-for="(item, index) in labelData.slice(13)" :key="Math.random()"
                  :class="{'type-selected': item.flag === true}">{{item.label}}：{{item.value}}</span>
          </div>
        </div>
        <div class="interactiveInformation-box" :style="{marginTop:!showLabel?'15px':'0'}">
          <div class="title">{{$t('ContactPortrait.interactiveInformationTitle')}}</div>
          <div class="select-box">
            <el-row type="flex">
              <el-col :span="4">
                <div class="eventType-select">
                  <el-select
                    v-model="eventType.eventTypeValues"
                    @change="eventTypeChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('ContactPortrait.EventType')">
                    <el-option
                      v-for="item in eventType.eventTypeOptions"
                      :key="Math.random()"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="4" :offset="1">
                <div class="source-select">
                  <el-select
                    v-model="source.sourceValues"
                    @change="sourceChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('ContactPortrait.Channel')">
                    <el-option
                      v-for="item in source.sourceOptions"
                      :key="Math.random()"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6" :offset="1">
                <div class="time-select">
                  <el-date-picker
                    v-model="timeValues"
                    @change="changeTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    :range-separator="$t('bidding.to')"
                    :start-placeholder="$t('ContactPortrait.startTime')"
                    :end-placeholder="$t('ContactPortrait.endTime')">
                  </el-date-picker>
                </div>
              </el-col>
            </el-row>
          </div>
          <typeTable :typeTable="typeTable"></typeTable>
        </div>
        <div class="machineInformation-box">
          <div class="title">{{$t('ContactPortrait.machineInformationTitle')}}</div>
          <div class="select-box">
            <el-row type="flex">
              <el-col :span="4">
                <div class="BG-select">
                  <el-select
                    v-model="BG.BGValues"
                    @change="BGChange"
                    multiple
                    collapse-tags
                    placeholder="BG">
                    <el-option
                      v-for="item in BG.BGOptions"
                      :key="Math.random()"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="4" :offset="1">
                <div class="product-family-select">
                  <el-select
                    v-model="productFamily.productFamilyValues"
                    @change="productFamilyChange"
                    multiple
                    collapse-tags
                    :placeholder="$t('ContactPortrait.ProductFamily')">
                    <el-option
                      v-for="item in productFamily.productFamilyOptions"
                      :key="Math.random()"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="4" :offset="1">
                <div class="brand-select">
                  <el-select
                    v-model="brand.brandValues"
                    multiple
                    @change="brandChange"
                    collapse-tags
                    :placeholder="$t('ContactPortrait.Brand')">
                    <el-option
                      v-for="item in brand.brandOptions"
                      :key="Math.random()"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="4" :offset="1">
                <div class="warranty-select">
                  <el-select
                    clearable
                    v-model="warranty.warrantyValue"
                    @change="warrantyChange"
                    :placeholder="$t('ContactPortrait.UnderWarrany')">
                    <el-option
                      v-for="item in warranty.warrantyOptions"
                      :key="Math.random()"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="agGrid-box">
            <div class="result-header">
              <div class="quick-filter">
                <el-input v-model="resultValue" suffix-icon="el-icon-search" placeholder="Global filter"
                          style="width: 200px"></el-input>
              </div>
            </div>
            <ag-grid-vue
              v-loading="loading.machineTableLoading"
              style="width: 100%; height: calc(100vh - 330px);" class="ag-theme-balham"
              :gridOptions="machineTransactionOptions"
              :enableColResize="true"
              :groupHeaders="false"
              :suppressHorizontalScroll="true"
              :suppressRowClickSelection="true"
              :toolPanelSuppressGroups="false"
              :toolPanelSuppressValues="false">
            </ag-grid-vue>
            <div class="block">
              <el-pagination
                @size-change="handleMachineSizeChange"
                @current-change="handleMachineCurrentChange"
                :page-sizes=[50,100,150,200]
                layout="total, sizes, prev, pager, next, jumper"
                :total="paginationData.machineTableTotal">
              </el-pagination>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import clickoutside from '../../DataTools/components/clickoutside';
  import {getUsername, getPageId, getPageName, getUrl, setKeyword, setbutValue} from "../../../utils/auth";
  import {AgGridVue} from "ag-grid-vue";
  import {mapGetters} from 'vuex'
  import typeTable from './components/typeTable'
  //  import myDialog from '../components/myDialog.vue'
  export default {
    name: 'ContactPortraitSearchResult',
    data(){
      return {
        userId: '',
        lenovoId: '',
        Tel:'',
        showLabel: false,
        baseInfoData: {},
        typeTable: [],
        labelData: [],
        selectedTypeLabelData: [],
        showMoreLabel: false,
        BG: {
          BGValues: [],
          BGOptions: [],
        },
        productFamily: {
          productFamilyValues: [],
          productFamilyOptions: []
        },
        brand: {
          brandValues: [],
          brandOptions: [],
        },
        warranty: {
          warrantyValue: '',
          warrantyOptions: [
            {
              value: 'Y',
              label: '是'
            }, {
              value: 'N',
              label: '否'
            },
          ],
        },
        eventType: {
          eventTypeValues: [],
          eventTypeOptions: [],
        },
        source: {
          sourceValues: [],
          sourceOptions: [],
        },
        timeValues: [],
        loading: {
          machineTableLoading: false
        },
        machineTransactionOptions: {
//          enableRangeSelection: true,
//          rowSelection: 'multiple',
          context: {
            componentParent: this
          },
          columnDefs: [
            {
              headerName: "SN",
              field: "sn",
//              headerCheckboxSelection: true,
//              checkboxSelection: true,
            },
            {
              headerName: "MT",
              field: "mt",
            },
            {
              headerName: "BG",
              field: "bg",
            },
            {
              headerName: "Brand",
              field: "brand",
            },
            {
              headerName: "产品系列",
              field: "series",
            },
            {
              headerName: "Product Family",
              field: "family",
            },
            {
              headerName: "激活时间",
              field: "prod_activation_date",
            },
            {
              headerName: "保修开始时间",
              field: "wty_start_date",
            },
            {
              headerName: "保修结束时间",
              field: "wty_end_date",
            },
            {
              headerName: "是否在保",
              field: "wty_active",
            },
            {
              headerName: "保修次数",
              field: "count_claim",
            },
//
          ],
        },
        paginationData: {
          machineTableTotal: 100,
          machineTablePageSize: 50,
          machineTablePageNumber: 1,
        },
        resultValue: '',
      }
    },
    directives: {
      'clickoutside': clickoutside
    },
    methods: {
      isBottom() {
        console.log('滚动到底部了')
      },
      toggleText(){
        this.showMoreLabel = !this.showMoreLabel;
      },
      selectedTypeLabel(item){
        item.flag = !item.flag;
        if (item.flag === true) {
          this.selectedTypeLabelData.push(item.value)
        } else {
          this.selectedTypeLabelData.splice(this.selectedTypeLabelData.indexOf(item.value), 1)
        }
      },
      handleMachineSizeChange(val){
        this.paginationData.machineTablePageSize = val;
        this.loadMachineTableData()
      },
      handleMachineCurrentChange(val){
        this.paginationData.machineTablePageNumber = val;
        this.loadMachineTableData()
      },
      BGChange(){
        this.loadMachineTableData();
      },
      productFamilyChange(){
        this.loadMachineTableData();
      },
      brandChange(){
        this.loadMachineTableData();
      },
      warrantyChange(){
        this.loadMachineTableData();
      },
      eventTypeChange(){
        this.loadEventTableData();
      },
      sourceChange(){
        this.loadEventTableData();
      },
      changeTime(){
        this.loadEventTableData();
      },
      async loadBaseInfoData(){
        let params = {
          user_id: this.userId,
          columnList: ["user_id", "name", "customername", "bu_type", "work_position", "lenovoid", "telephone", "email", "nick_name", "language", "customer_group","territory"]
        };
        try {
          let res = await this.axios.post('/eservice/contact/info', params);
          let resData = res.data;
          if (resData.status === 200) {
            this.baseInfoData = resData.data;
          }
        } catch (e) {
          console.log(e);
        }
      },
      async loadTagsData(){
        let params = {
          'lenovo_id': this.lenovoId || this.Tel
        };
        try {
          let res = await this.axios.post('/eservice/contact/tags', params);
          let resData = res.data;
          if (resData.status === 200) {
              if(resData.data.length!==0){
                this.labelData = resData.data.map(item => {
                  return {
                    label: item.tagName,
                    value: item.tagValue,
                    weight: item.weight,
                    flag: false
                  }
                });
//                if (this.labelData.length !== 0) {
//                  this.showLabel = true;
//                }
              }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async loadEventFilterData(){
        let params = {
          user_id: this.userId,
          event_type: this.eventType.eventTypeValues,
          source: this.source.sourceValues
        };
        try {
          let res = await this.axios.post('/eservice/contact/event/filter', params);
          let resData = res.data;
          if (resData.status === 200) {
            this.eventType.eventTypeOptions = resData.data.event_type.map(item => {
              return {label: item, value: item}
            });
            this.source.sourceOptions = resData.data.event_channel.map(item => {
              return {label: item, value: item}
            });
          }
        } catch (e) {
          console.log(e);
        }
      },
      async loadEventTableData(){
        let params = {
          user_id: this.userId,
          event_type: this.eventType.eventTypeValues,
          event_channel: this.source.sourceValues,
          start_date: this.timeValues.length === 0 ? '' : this.timeValues[0],
          end_date: this.timeValues.length === 0 ? '' : this.timeValues[1],
        };
        try {
          let res = await this.axios.post('/eservice/contact/event', params);
          let resData = res.data;
          if (resData.status === 200) {
            this.typeTable = resData.data.data.map(item => {
              return {
                time: item.event_time,
                type: item.event_type,
                channel: item.event_channel,
                details: item.event_info,
                isShow: false
              }
            });
          }
        } catch (e) {
          console.log(e);
        }
      },
      async loadMachineTableData(){
        let params = {
          user_id: this.userId,
          bg: this.BG.BGValues,
          brand: this.brand.brandValues,
          family: this.productFamily.productFamilyValues,
          wty_active: this.warranty.warrantyValue === '' ? [] : [this.warranty.warrantyValue],
          pageNum: this.paginationData.machineTablePageNumber,
          pageSize: this.paginationData.machineTablePageSize,
        };
        try {
          let res = await this.axios.post('/eservice/contact/machine', params);
          let resData = res.data;
          if (resData.status === 200) {
            this.paginationData.machineTableTotal = resData.data.total;
            this.machineTransactionOptions.api.setRowData(resData.data.data);
            this.machineTransactionOptions.api.sizeColumnsToFit();
          }
        } catch (e) {
          console.log(e);
        }
      },
      async loadMachineFilterData(){
        let params = {
          user_id: this.userId,
          bg: this.BG.BGValues,
          brand: this.brand.brandValues,
          family: this.productFamily.productFamilyValues,
        };
        try {
          let res = await this.axios.post('/eservice/contact/machine/filter', params);
          let resData = res.data;
          if (resData.status === 200) {
            this.BG.BGOptions = resData.data.bg.map(item => {
              return {label: item, value: item}
            });
            this.brand.brandOptions = resData.data.brand.map(item => {
              return {label: item, value: item}
            });
            this.productFamily.productFamilyOptions = resData.data.family.map(item => {
              return {label: item, value: item}
            });
          }
        } catch (e) {
          console.log(e);
        }
      },
      loadAllData(){
        this.loadBaseInfoData();
        if(this.lenovoId!==''||this.Tel!==''){
           this.loadTagsData();
        }
        this.loadEventFilterData();
        this.loadEventTableData();
        this.loadMachineFilterData();
        this.loadMachineTableData();
      },
      agGridResize(){
        setTimeout(() => {
          this.machineTransactionOptions.api.sizeColumnsToFit();
        }, 200)
      },
    },
    computed: {
      ...mapGetters(
        ['sidebar']
      )
    },
    components: {
      AgGridVue,
      typeTable
    },
    beforeDestroy() {

    },
    beforeMount(){
      this.userId = this.$route.query.user_id;
      this.lenovoId = this.$route.query.lenovo_id;
      this.Tel = this.$route.query.Tel
    },
    mounted(){
      this.loadAllData();
      window.onresize = () => {
        this.agGridResize()
      };
    },
    watch: {
      resultValue(){
        this.machineTransactionOptions.api.setQuickFilter(this.resultValue)
      },
      'sidebar.opened': function () {
        this.agGridResize()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ContactPortraitSearchResult {
    overflow: hidden;
    margin-bottom: 20px;
    .source-box {
      float: right;
      margin: 10px 10px 10px 0;
      span {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #108EE9;
        text-align: center;
      }
    }
    .container {
      margin-top: 40px;
      padding: 0 10px;
      .header-box {
        overflow: hidden;
        .photo {
          float: left;
          width: 72px;
          /*overflow: hidden;*/
          /*text-overflow: ellipsis;*/
          /*white-space: nowrap;*/
          .picture {
            height: 73px;
          }
          span {
            display: inline-block;
            width: 100%;
            text-align: center;
            font-family: Helvetica;
            margin-top: 2px;
            font-size: 10px;
            color: #666666;
          }
        }
        .message-box {
          margin-left: 100px;
          .message-up, .message-down {
            padding-top: 13px;
            height: 45px;
            line-height: 45px;
            .el-col {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .message-up {
            .el-col {
              span {
                font-family: PingFang-SC-Bold;
                font-size: 20px;
                color: #000000;
                /*display: block;*/
                margin-top: -4px;
              }
            }
          }
          .message-down {
            .el-col {
              span {
                font-family: Helvetica;
                font-size: 14px;
                color: #666666;
              }
            }
          }
        }
      }
      .label-box {
        .type-title {
          width: 50px;
          height: 50px;
          line-height: 50px;
          /*font-size: 16px;*/
          font-family: Helvetica-Bold;
          font-size: 20px;
          color: #FF5B00;
          /*font-weight: bold;*/
          cursor: pointer;
        }
        .type-detial {
          position: relative;
          bottom: 2px;
          .text-btn {
            position: absolute;
            right: 0;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #108EE9;
            text-decoration: underline;
          }
          .type-selected {
            background: rgba(16, 142, 233, 0.12);
            border-radius: 15px;
            font-family: OpenSans;
            font-size: 12px;
            color: #108EE9 !important;
            padding: 2px 8px;
            /*padding: 2px 10px 2px 0;*/
            box-sizing: content-box;
          }
        }
        .type-item {
          /*padding: 2px 10px 2px 0;*/
          padding: 2px 8px;
          box-sizing: content-box;
          display: inline-block;
          /*width: 60px;*/
          height: 20px;
          line-height: 20px;
          text-align: center;
          /*margin-right: 45px;*/
          margin-right: 20px;
          margin-bottom: 15px;
          border-radius: 10px;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #666666;
          /*cursor: pointer;*/
          // 禁止选中文本
          -moz-user-select: none; /*火狐*/
          -webkit-user-select: none; /*webkit浏览器*/
          -ms-user-select: none; /*IE10*/
          -khtml-user-select: none; /*早期浏览器*/
          user-select: none;
        }
      }
      .interactiveInformation-box {
        .title {
          font-family: Helvetica-Bold;
          font-size: 20px;
          color: #FF5B00;
          margin: 0 0 15px;
        }
        .select-box {
          margin-bottom: 15px;
          .time-select {
            margin: 0;
          }
        }
      }
      .machineInformation-box {
        .title {
          font-family: Helvetica-Bold;
          font-size: 20px;
          color: #FF5B00;
          margin: 15px 0;
        }
        .agGrid-box {
          margin-top: 10px;
          .block {
            float: right;
            margin: 10px 0;
          }
          .result-header {
            overflow: hidden;
            /*margin-bottom: 5px;*/
            .quick-filter {
              float: right;
            }
          }
        }
      }
    }
  }

</style>
<style lang="scss">
  .ag-theme-balham .ag-row-even {
    background-color: unset;
  }

  .ag-theme-balham .ag-row-odd {
    background-color: unset;
  }

</style>
